<%--
  Created by IntelliJ IDEA.
  User: 86158
  Date: 2022/10/25
  Time: 11:23
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>

<html>
<head>
    <title>注册</title>
    <link href="${pageContext.request.contextPath}/layui/css/layui.css" rel="stylesheet">
    <script src="${pageContext.request.contextPath}/layui/layui.js"></script>

    <style>
        * {
            margin: 0 auto;
            padding: 0;
        }

        #div1 {
            text-align: center;
            width: 800px;
            height: 400px;
            background-color: white;
        }

        #title {
            padding-bottom: 15px;
            color: #1e9fff;

        }

    </style>
</head>
<body style="align-items: center;">
<div id="div1" class="layui-main">
    <h1 id="title">上传文档</h1>
    <hr>
    <br>
    <form class="layui-form" action="" enctype="multipart/form-data">
        <div class="layui-form-item">
            <div class="layui-col-lg6">
                <label class="layui-form-label">文档标题</label>
                <div class="layui-input-block">
                    <input type="text"
                           name="title"
                           id="title1"
                           required lay-verify="required"
                           autocomplete="off"
                           class="layui-input">
                </div>
            </div>
        </div>
        <div class="layui-form-item layui-form-text">
            <div class="layui-col-lg12">
                <label class="layui-form-label">文档描述</label>
                <div class="layui-input-block">
                    <textarea name="remark" id="remark" class="layui-textarea"></textarea>
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-col-lg12">
                <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
                    <legend>请选择文件</legend>
                </fieldset>
                <div class="layui-input-block">
                    <div class="layui-btn-container">
                        <button type="button" class="layui-btn layui-btn-normal" id="upload">选择文件</button>
                        <button type="button" class="layui-btn" style="display: none" id="startUpload"></button>
                    </div>
                </div>
            </div>
        </div>

        <br>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn layui-btn-normal" lay-submit lay-filter="Add-filter">添加</button>
                <button type="reset" class="layui-btn layui-btn-primary" id="reset">重置</button>
            </div>
        </div>
    </form>

</div>

</body>
<script>
    //Demo
    layui.use(['form', 'jquery', 'layer', 'element', 'laydate'], function () {
        var form = layui.form;
        var $ = layui.jquery;
        var layer = layui.layer;
        var element = layui.element;
        var upload = layui.upload;
        var loading;

        form.on('submit(Add-filter)', function (data) {
            $('#startUpload').trigger('click');
            return false;
        });

        //上传
        var uploadInst = upload.render({
            elem: '#upload'
            , url: '${pageContext.request.contextPath}/document/upload'
            // , headers: {authorization: token}
            , size: 1024 * 100    //最大100m
            , accept: 'file'
            , multiple: false     //不允许多文件上传
            , auto: false
            , bindAction: '#startUpload'
            , before: function () {
                this.data = {
                    title: $('#title1').val(),
                    remark: $('#remark').val(),
                    userId: ${loginUser.id}
                };

                loading = layer.msg('上传中..', {
                    icon: 16
                    , shade: 0.5
                    , time: false
                });
            }
            , done: function (res, index, upload) {
                layer.close(loading);
                if (res.code == 0) {
                    layer.msg(res.msg, {icon: 1});
                    $('#reset').trigger('click');
                } else {
                    layer.msg(res.msg, {icon: 2});
                }
            }
            , error: function (index, upload) {
                layer.msg("上传失败")
            }
        });


    });
</script>
</html>
